<template>
  <el-space wrap class="watchCard">
    <el-card
      v-for="i in 8"
      :key="i"
      class="box-card"
      style="width: 130px; height: 180px; margin-right: 5px"
    >
      <div>
        <img src="@/assets/images/20.jpg" alt="" />
      </div>
      <p>舞蹈资料君</p>
      <el-button class="button" text icon="ele-Plus">关注</el-button>
    </el-card>
  </el-space>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'WatchCard',
});
</script>

<script setup lang="ts"></script>

<style scoped lang="less">
.watchCard {
  width: 100%;
  margin: 0 auto;
  .box-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      width: 50px;
      height: 50px;
      margin-left: 15px;
      border-radius: 50%;
    }

    p {
      font-size: 12px;
      text-align: center;
    }
    button {
      margin: 10px 4px;
      font-size: xx-small;
      color: #f93684;
      background-color: #ffebf2;
      border: 1px solid #f93684;
      border-radius: 10px;
    }
  }
}
</style>
